<template>
	<view class="content font_family">
		<view class="list" v-if="list.length>0">
			<u-swipe-action>
				<u-swipe-action-item v-for="(item,index) in list" :key="index" :options="options1" @click='click'
					:name='index'>
					<view class="item f" @click="go(`/pages/detail/detail?id=${item.good_id}`)">
						<image :src="item.good_image" mode="aspectFill"></image>
						<view class="msg f_d f_z_b">
							<view class="title text_ellipsis2">
								{{item.good_title}}
							</view>
							<view class="num">
								{{item.goods_coll_nums}}人已收藏
							</view>
							<view class="price">
								<text>￥</text>
								<text>{{item.min_dl_price}}</text>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>

		</view>
		<view class="kong" v-else>
			<u-empty icon="/static/public/kong.png" text='暂无收藏' textSize="32rpx">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { collectionList, collection } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['dl_id'])
		},
		data() {
			return {
				list: [],
				query_data: {
					page: 1,
					dl: ''
				},
				more: 'loadmore',
				options1: [{
					text: '取消收藏',
					style: {
						backgroundColor: '#FF3767'
					}
				}]
			}
		},
		onLoad() {
			this.query_data.dl = this.dl_id
			this.get_list()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_list()
			}
		},
		methods: {
			get_list() {
				collectionList(this.query_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.data.length > 0) {
							this.query_data.page += 1
							this.list = [...this.list, ...res.data.data.data]
							console.log(this.list)
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			click(e) {
				// console.log(e)
				let obj = {
					good_id: this.list[e.name].good_id,
					type: 2
				}
				collection(obj).then(res => {
					if (res.code == 1) {
						this.list = []
						this.query_data.page = 1
						this.get_list()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.list {
			padding: 30rpx;

			.item {
				margin-bottom: 24rpx;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				image {
					width: 202rpx;
					height: 186rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.msg {
					flex: 1;
					margin-left: 24rpx;

					.title {
						font-weight: 400;
						font-size: 32rpx;
						color: #232323;
					}

					.num {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

					.price {
						font-weight: 400;
						font-size: 32rpx;
						color: #FF3767;

						.icon {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>